<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="前端" tabindex="-1"><a class="header-anchor" href="#前端"><span>前端</span></a></h2>
<ul>
<li><a href="#introduction">简介</a></li>
<li><a href="#using-php">使用 PHP</a>
<ul>
<li><a href="#php-and-blade">PHP 和 Blade</a></li>
<li><a href="#livewire">Livewire</a></li>
<li><a href="#php-starter-kits">入门套件</a></li>
</ul>
</li>
<li><a href="#using-vue-react">使用 Vue / React</a>
<ul>
<li><a href="#inertia">Inertia</a></li>
<li><a href="#inertia-starter-kits">入门套件</a></li>
</ul>
</li>
<li><a href="#bundling-assets">打包资源</a></li>
</ul>
<h2 id="简介" tabindex="-1"><a class="header-anchor" href="#简介"><span>简介</span></a></h2>
<p>Laravel 是一个后端框架，它提供了构建现代 Web 应用程序所需的所有功能，如 <a href="https://learnku.com/docs/laravel/11.x/routing" target="_blank" rel="noopener noreferrer">路由</a>、<a href="https://learnku.com/docs/laravel/11.x/validation" target="_blank" rel="noopener noreferrer">验证</a>、<a href="https://learnku.com/docs/laravel/11.x/cache" target="_blank" rel="noopener noreferrer">缓存</a>、<a href="https://learnku.com/docs/laravel/11.x/queues" target="_blank" rel="noopener noreferrer">队列</a>、<a href="https://learnku.com/docs/laravel/11.x/filesystem" target="_blank" rel="noopener noreferrer">文件存储</a> 等。然而，我们认为为开发人员提供美观的全栈体验，包括构建应用前端的强大方法，是非常重要的。</p>
<p>在使用 Laravel 构建应用程序时，有两种主要的前端开发方式，选择哪种方式取决于你是想利用 PHP 构建前端，还是使用 Vue 和 React 等 JavaScript 框架。我们将在下面讨论这两种选择，以便你能够做出关于应用程序前端开发的最佳决策。</p>
<h2 id="使用-php" tabindex="-1"><a class="header-anchor" href="#使用-php"><span>使用 PHP</span></a></h2>
<h3 id="php-和-blade" tabindex="-1"><a class="header-anchor" href="#php-和-blade"><span>PHP 和 Blade</span></a></h3>
<p>过去，大多数 PHP 应用程序使用简单的 HTML 模板与 PHP <code v-pre>echo</code> 语句混合，来呈现从数据库中检索到的数据的：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div&gt;</span>
<span class="line">    &lt;?php foreach ($users as $user): ?&gt;</span>
<span class="line">        Hello, &lt;?php echo $user-&gt;name; ?&gt; &lt;br /&gt;</span>
<span class="line">    &lt;?php endforeach; ?&gt;</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在 Laravel 中，仍然可以使用 <a href="https://learnku.com/docs/laravel/11.x/views" target="_blank" rel="noopener noreferrer">视图</a> 和 <a href="https://learnku.com/docs/laravel/11.x/blade" target="_blank" rel="noopener noreferrer">Blade</a> 实现这种渲染 HTML 的方法。Blade 是一种极其轻量级的模板语言，提供了便捷的简短语法来显示数据、迭代数据等：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div&gt;</span>
<span class="line">    @foreach ($users as $user)</span>
<span class="line">        Hello, {{ $user-&gt;name }} &lt;br /&gt;</span>
<span class="line">    @endforeach</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在这种方式下构建应用程序时，表单提交和其他页面交互通常会从服务器接收一个全新的 HTML 文档，整个页面会由浏览器重新渲染。即使在今天，许多应用程序仍然适合通过简单的 Blade 模板构建其前端。</p>
<h4 id="不断提高的期望" tabindex="-1"><a class="header-anchor" href="#不断提高的期望"><span>不断提高的期望</span></a></h4>
<p>然而，随着用户对 Web 应用程序的期望不断提高，许多开发者发现需要构建更具动态性的前端，提供更流畅的交互体验。基于此，一些开发者选择开始使用 JavaScript 框架（如 Vue 和 React）来构建应用程序的前端。</p>
<p>其他人则更喜欢使用他们熟悉的后端语言，开发出可利用他们首选的后端语言构建现代 Web 应用程序 UI 的解决方案。例如，在 <a href="https://rubyonrails.org/" target="_blank" rel="noopener noreferrer">Rails</a> 生态系统中，这促使了诸如 <a href="https://turbo.hotwired.dev/" target="_blank" rel="noopener noreferrer">Turbo</a>、<a href="https://hotwired.dev/" target="_blank" rel="noopener noreferrer">Hotwire</a> 和 <a href="https://stimulus.hotwired.dev/" target="_blank" rel="noopener noreferrer">Stimulus</a> 这样的库的创建。</p>
<p>在 Laravel 生态系统中，主要使用 PHP 来创建现代动态前端的需求催生了 <a href="https://livewire.laravel.com/" target="_blank" rel="noopener noreferrer">Laravel Livewire</a> 和 <a href="https://alpinejs.dev/" target="_blank" rel="noopener noreferrer">Alpine.js</a> 的诞生。</p>
<h3 id="livewire" tabindex="-1"><a class="header-anchor" href="#livewire"><span>Livewire</span></a></h3>
<p><a href="https://livewire.laravel.com/" target="_blank" rel="noopener noreferrer">Laravel Livewire</a> 是一个用于构建 Laravel 驱动的前端框架，它让前端感觉像使用现代 JavaScript 框架（如 Vue 和 React）构建的一样动态、现代和生动。</p>
<p>使用 Livewire 时，您将创建 Livewire “组件”，这些组件渲染用户界面的一个独立部分，并暴露可以从应用程序前端调用和交互的方法和数据。例如，一个简单的“计数器”组件可能如下所示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Livewire</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Livewire<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Counter</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token variable">$count</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">count</span><span class="token operator">++</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'livewire.counter'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>对应的计数器模板可以这样写：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;div&gt;</span>
<span class="line">    &lt;button wire:click=&quot;increment&quot;&gt;+&lt;/button&gt;</span>
<span class="line">    &lt;h1&gt;{{ $count }}&lt;/h1&gt;</span>
<span class="line">&lt;/div&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>正如你所看到的，Livewire 允许你编写诸如 <code v-pre>wire:click</code> 这样的新 HTML 属性，将 Laravel 应用程序的前端和后端连接起来。此外，你可以使用简单的 Blade 表达式渲染组件的当前状态。</p>
<p>对于许多人来说，Livewire 革新了 Laravel 的前端开发，使他们能够在熟悉的 Laravel 环境中构建现代、动态的 Web 应用程序。通常，使用 Livewire 的开发者也会使用 <a href="https://alpinejs.dev/" target="_blank" rel="noopener noreferrer">Alpine.js</a> 来“点缀”他们的前端，只在需要的地方添加 JavaScript，比如渲染一个对话框。</p>
<p>如果你是 Laravel 新手，我们建议你先熟悉 <a href="https://learnku.com/docs/laravel/11.x/views" target="_blank" rel="noopener noreferrer">视图</a> 和 <a href="https://learnku.com/docs/laravel/11.x/blade" target="_blank" rel="noopener noreferrer">Blade</a> 的基本用法。然后，查阅官方的 <a href="https://livewire.laravel.com/docs" target="_blank" rel="noopener noreferrer">Laravel Livewire 文档</a> 来学习如何使用交互式的 Livewire 组件将你的应用提升到一个新的水平。</p>
<h3 id="starter-kits" tabindex="-1"><a class="header-anchor" href="#starter-kits"><span>Starter Kits</span></a></h3>
<p>如果你希望使用 PHP 和 Livewire 构建前端，可以利用我们的 Breeze 或 Jetstream <a href="https://learnku.com/docs/laravel/11.x/starter-kits" target="_blank" rel="noopener noreferrer">starter kits</a> 来快速启动你的应用开发。这些 starter kits 使用 <a href="https://learnku.com/docs/laravel/11.x/blade" target="_blank" rel="noopener noreferrer">Blade</a> 和 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind</a> 为你的应用程序的后端和前端认证流程搭建骨架，让你可以专注于开发你的下一个大创意。</p>
<h2 id="使用-vue-react" tabindex="-1"><a class="header-anchor" href="#使用-vue-react"><span>使用 Vue / React</span></a></h2>
<p>尽管可以使用 Laravel 和 Livewire 构建现代前端，许多开发者仍然倾向于利用 Vue 或 React 这样的 JavaScript 框架的强大功能。这让开发者能够利用 NPM 提供的丰富的 JavaScript 包和工具生态系统。</p>
<p>然而，如果没有额外的工具，将 Laravel 与 Vue 或 React 结合使用会带来一系列复杂的问题，例如客户端路由、数据注入和认证。客户端路由通常可以通过使用类似 <a href="https://nuxt.com/" target="_blank" rel="noopener noreferrer">Nuxt</a> 和 <a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next</a> 这样的 Vue / React 框架来简化；然而，当将 Laravel 这样的后端框架与这些前端框架结合时，数据注入和认证仍然是复杂且繁琐的问题。</p>
<p>此外，开发者还需要维护两个独立的代码库，通常需要协调这两个代码库的维护、发布和部署。虽然这些问题并非无法克服，但我们不认为这是一种高效或令人愉快的开发应用程序的方式。</p>
<h3 id="inertia" tabindex="-1"><a class="header-anchor" href="#inertia"><span>Inertia</span></a></h3>
<p>幸运的是，Laravel 提供了一种兼顾两者的解决方案。<a href="https://inertiajs.com/" target="_blank" rel="noopener noreferrer">Inertia</a> 架起了 Laravel 应用程序和现代 Vue 或 React 前端之间的桥梁，允许你在一个代码库中使用 Vue 或 React 构建完整的现代前端，同时利用 Laravel 的路由和控制器来处理路由、数据注入和认证。通过这种方式，你可以充分利用 Laravel 和 Vue / React 的强大功能，而不会削弱任何一个工具的能力。</p>
<p>在将 Inertia 安装到你的 Laravel 应用程序后，你可以像往常一样编写路由和控制器。然而，从控制器返回的不是 Blade 模板，而是 Inertia 页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>Controller</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Inertia<span class="token punctuation">\</span>Inertia</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Inertia<span class="token punctuation">\</span>Response</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">UserController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 显示给定用户的个人资料。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">show</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$id</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">Response</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token class-name static-context">Inertia</span><span class="token operator">::</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Users/Profile'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'user'</span> <span class="token operator">=></span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">findOrFail</span><span class="token punctuation">(</span><span class="token variable">$id</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Inertia 页面对应于一个 Vue 或 React 组件，通常存储在应用程序的 <code v-pre>resources/js/Pages</code> 目录中。通过 <code v-pre>Inertia::render</code> 方法传递给页面的数据将用于初始化页面组件的 “props”：</p>
<div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre v-pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"><span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'@/Layouts/Authenticated.vue'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Head <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Head</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>User Profile<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span>
<span class="line"></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Layout</span><span class="token punctuation">></span></span></span>
<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#header</span><span class="token punctuation">></span></span></span>
<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-semibold text-xl text-gray-800 leading-tight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">                Profile</span>
<span class="line">            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span></span>
<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>py-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">            Hello, {{ user.name }}</span>
<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Layout</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如你所见，Inertia 允许你在构建前端时充分利用 Vue 或 React 的强大功能，同时提供了一个轻量级的桥梁，将 Laravel 驱动的后端与 JavaScript 驱动的前端连接起来。</p>
<h4 id="服务器端渲染" tabindex="-1"><a class="header-anchor" href="#服务器端渲染"><span>服务器端渲染</span></a></h4>
<p>如果你担心使用 Inertia 会影响应用程序的服务器端渲染，不必担心。Inertia 提供 <a href="https://inertiajs.com/server-side-rendering" target="_blank" rel="noopener noreferrer">服务器端渲染支持</a>。而且，当你通过 <a href="https://forge.laravel.com/" target="_blank" rel="noopener noreferrer">Laravel Forge</a> 部署应用程序时，确保 Inertia 的服务器端渲染过程始终运行非常简单。</p>
<h3 id="入门套件" tabindex="-1"><a class="header-anchor" href="#入门套件"><span>入门套件</span></a></h3>
<p>如果你希望使用 Inertia 和 Vue / React 构建前端，可以利用我们的 Breeze 或 Jetstream <a href="https://learnku.com/docs/laravel/11.x/starter-kits#breeze-and-inertia" target="_blank" rel="noopener noreferrer">入门套件</a> 来快速启动你的应用开发。这些 入门套件使用 Inertia、Vue / React、<a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind</a> 和 <a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite</a> 为你的应用程序的后端和前端认证流程搭建骨架，让你可以专注于开发你的下一个大创意。</p>
<h2 id="打包资源" tabindex="-1"><a class="header-anchor" href="#打包资源"><span>打包资源</span></a></h2>
<p>无论你选择使用 Blade 和 Livewire 还是 Vue / React 和 Inertia 来开发前端，你都可能需要将应用程序的 CSS 打包成生产就绪的资源。当然，如果你选择使用 Vue 或 React 来构建前端，还需要将组件打包成浏览器可用的 JavaScript 资源。</p>
<p>默认情况下，Laravel 使用 <a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite</a> 来进行资源打包。Vite 提供极快的构建时间和本地开发时几乎瞬时的模块热替换（HMR）。在所有新的 Laravel 应用程序中，包括使用我们的 <a href="https://learnku.com/docs/laravel/11.x/starter-kits" target="_blank" rel="noopener noreferrer">入门套件</a> 的应用程序，你会找到一个 <code v-pre>vite.config.js</code> 文件，该文件加载了我们的轻量级 Laravel Vite 插件，使得在 Laravel 应用程序中使用 Vite 变得非常轻松。</p>
<p>如果你想快速开始使用 Laravel 和 Vite，请从 <a href="https://learnku.com/docs/laravel/11.x/starter-kits#laravel-breeze" target="_blank" rel="noopener noreferrer">Laravel Breeze</a> 开始，这是我们最简单的 starter kit，提供了前端和后端认证的基本结构。</p>
<blockquote>
<p><strong>注意</strong><br>
想要了解更详细关于在 Laravel 中使用 Vite 的文档，请参阅我们的 <a href="https://learnku.com/docs/laravel/11.x/vite" target="_blank" rel="noopener noreferrer">专用文档</a>。</p>
</blockquote>
<blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/11.x/frontendmd/16650" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/11.x/fr...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/11.x/frontendmd/16650" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/11.x/fr...</a></p>
</blockquote>
</div></template>


